import React, { useEffect, useState } from "react";
import axios from "axios";
import "./index.css";

import { Pagination } from "antd";

const onShowSizeChange = (current, pageSize) => {
  console.log(current, pageSize);
};

export default function List() {
  const [videoList, setVideoList] = useState([]);
  const [pageParams, setPageParams] = useState({
    current: 1,
    pageSize: 10,
    total: 40,
  });
  const getVideoList = async () => {
    const { data } = await axios({
      url: "https://www.fastmock.site/mock/3c57048e50458aa2642d6a0a9c5445bc/videolis/test",
      method: "get",
    });
    console.log("data.data :>> ", data.data);
    setVideoList(data.data);
    // 拿到数据，写一个函数，如何方法传入三个参数，一个数组，一个current，一个pageSize
    // 这个函数会返回一个这样的数据结构
    /**
     * {
     *  page: number,
     *  pageSize: number,
     *  pages: number,
     *  total: number,
     *  dataa: [
     *   {
     *      details: "介绍介绍介绍介绍"
            id: 1
            lessons: 12
            titile: "2020前端技术的发展趋势"
            watch: 1222
     * }
     *   ]
     * }
     */
    // 函数值回来之后，如何就是设置分页
    // setPageParams({
    //   current: page,
    //   pageSize: pageSize,
    //   total: total,
    // })
  };

  // 分页切换
  const onChangePage = (page, pageSize) => {
    console.log("page :>> ", page);
    console.log("pageSize :>> ", pageSize);
  };
  useEffect(() => {
    getVideoList();
  }, []);

  return (
    <div>
      <div className="list-middle">
        <div className="left">
          <ul>
            <li>全部产品</li>
            <li>飞搭Feida</li>
            <li>汉得协同制造软件</li>
            <li>汉得智能合同管理软件</li>
            <li>红珊瑚</li>
            <li>汉得运输管理软件</li>
            <li>汉得智慧财务管理套件</li>
            <li>汉得运输管理软件</li>
            <li>汉得清分结算软件</li>
            <li>海马汇</li>
          </ul>
        </div>
        <div className="right">
          <div className="right-header">
            <ul>
              <li>视频分类</li>
              <li>全部分类</li>
              <li>开放平台</li>
              <li>项目管理</li>
              <li>开发者</li>
              <li>猪齿鱼</li>
              <li></li>
            </ul>
          </div>
          <div className="right-content">
            {videoList.map((item) => {
              return (
                <ul key={item.id}>
                  <li>
                    <img src={require("../assets/ppp.png")} alt="" />
                    <h3>{item.titile}</h3>
                    <p>{item.details}</p>
                  </li>
                </ul>
              );
            })}
          </div>
          <div className="pagination">
            <Pagination
              onChange={onChangePage}
              showSizeChanger
              onShowSizeChange={onShowSizeChange}
              total={pageParams.total}
              responsive={true}
              pageSize={pageParams.pageSize}
              current={pageParams.current}
            />
          </div>
        </div>
      </div>
    </div>
  );
}
